<template>
  <div>

    <SkyCardPanel title="树形下拉框">
      <div slot="main">

        <SkyTreeSelect :options="options" v-model="value"></SkyTreeSelect>

        <div style="height:30px"></div>

        <SkyTreeSelect :options="options2" divide="-" v-model="value2"></SkyTreeSelect>

      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">

        &lt;SkyTreeSelect :options="options" v-model="value"&gt;&lt;/SkyTreeSelect&gt;


        &lt;SkyTreeSelect :options="options2" divide="-"  v-model="value2"&gt;&lt;/SkyTreeSelect&gt;

          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">

        export default {
          data () {
            return {
              value: "1-3-32",
              value2: "1-11-21",
              options: [
                {
                  label: '中国',
                  value: 1,
                  children: [
                    {
                      label: '江苏省',
                      value: 2,
                      children: [
                        {
                          label: '南通市',
                          value: 21,
                        },
                        {
                          label: '苏州市',
                          value: 22,
                        },
                        {
                          label: '南京市',
                          value: 23,
                        },
                      ]
                    },
                    {
                      label: '浙江省',
                      value: 3,
                      children: [
                        {
                          label: '杭州市',
                          value: 31,
                        },
                        {
                          label: '宁波市',
                          value: 32,
                        },
                        {
                          label: '丽水市',
                          value: 33,
                        },
                      ]
                    },
                    {
                      label: '广东省',
                      value: 4,
                      children: [
                        {
                          label: '佛山市',
                          value: 41,
                        },
                        {
                          label: '广州市',
                          value: 42,
                        },
                        {
                          label: '东莞市',
                          value: 43,
                        },
                      ]
                    },
                  ]
                }
              ],
              options2: [
                {
                  label: '权力的游戏',
                  value: 1,
                  children: [
                    {
                      label: '北境之王',
                      value: 11,
                      children: [
                        {
                          label: '雪诺',
                          value: 21,
                        }
                      ]
                    },
                    {
                      label: '风暴之国',
                      value: 12,
                      children: [
                        {
                          label: '鹿王',
                          value: 25,
                        }
                      ]
                    },
                    {
                      label: '铁群岛',
                      value: 13,
                      children: [
                        {
                          label: '希恩',
                          value: 23,
                        }
                      ]
                    },
                  ]
                }
              ]
            }
          }
        }

          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

  </div>
</template>

<script>
  export default {
    data () {
      return {
        value: "1-3-32",
        value2: "1-11-21",
        options: [
          {
            label: '中国',
            value: 1,
            children: [
              {
                label: '江苏省',
                value: 2,
                children: [
                  {
                    label: '南通市',
                    value: 21,
                  },
                  {
                    label: '苏州市',
                    value: 22,
                  },
                  {
                    label: '南京市',
                    value: 23,
                  },
                ]
              },
              {
                label: '浙江省',
                value: 3,
                children: [
                  {
                    label: '杭州市',
                    value: 31,
                  },
                  {
                    label: '宁波市',
                    value: 32,
                  },
                  {
                    label: '丽水市',
                    value: 33,
                  },
                ]
              },
              {
                label: '广东省',
                value: 4,
                children: [
                  {
                    label: '佛山市',
                    value: 41,
                  },
                  {
                    label: '广州市',
                    value: 42,
                  },
                  {
                    label: '东莞市',
                    value: 43,
                  },
                ]
              },
            ]
          }
        ],
        options2: [
          {
            label: '权力的游戏',
            value: 1,
            children: [
              {
                label: '北境之王',
                value: 11,
                children: [
                  {
                    label: '雪诺',
                    value: 21,
                  }
                ]
              },
              {
                label: '风暴之国',
                value: 12,
                children: [
                  {
                    label: '鹿王',
                    value: 25,
                  }
                ]
              },
              {
                label: '铁群岛',
                value: 13,
                children: [
                  {
                    label: '希恩',
                    value: 23,
                  }
                ]
              },
            ]
          }
        ]
      }
    }
  }
</script>

<style>
</style>